<template>
  <div class="container">
    <div class="desc">
      <span class="title">卫星实况</span>
    </div>
    <div class="map">
      <SatelliteMap :longitude="longitude" :latitude="latitude"></SatelliteMap>
    </div>
  </div>
</template>

<script setup>
import { onMounted, watch,ref } from 'vue';
import SatelliteMap from './components/Satellite/index.vue'
let props=defineProps({
  latitude:{
    type:Number,
    default: null
  },
  longitude:{
    type:Number,
    default:null
  },
  zoom:{
    type:Number,
    default: 17
  }
})
let latitude=ref(props.latitude)
let longitude=ref(props.longitude)
watch(props,(newVal,oldVal)=>{
  latitude.value=newVal.latitude
  longitude.value=newVal.longitude
})
onMounted(()=>{
  
})
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid rgb(212, 207, 207);
  box-sizing: border-box;
  
  .desc{
    width: 96%;
    height: 5%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 1%;
    .title{
      font-weight: 700;
      border-left: 3px solid rgb(9, 184, 199);
      padding: 5px 10px;
    }
  }
  .map{
    width: 96%;
    flex: 1;
  }
}
</style>